<template>
  <div class="detbox">
    <header>
      <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
      <div></div>
      <i></i>
    </header>
    <div class="content">
      <h2>{{ list.title }}</h2>
      <div v-html="list.content" class="texbox"></div>
      <div class="comment">
        <ul class="mainrep">
          <li v-for="(item, i) in commenList" :key="i">
            <dl class="reply">
              <dt>
                <div class="userinfo">
                  <img :src="item.userimg" alt="" />
                  <p>{{ item.username }}</p>
                  <van-button
                    type="primary"
                    size="mini"
                    @click="reply(item.id, item.userid)"
                    v-if="$store.state.user.userid"
                    >回复</van-button
                  >
                </div>
                <p class="commentcon">{{ item.content }}</p>
              </dt>
              <dd v-for="(k, n) in item.reply" :key="n">
                <div class="userinfo">
                  <img :src="k.userimg" alt="" />
                  <p>{{ k.username }}</p>
                </div>
                <p>{{ k.content }}</p>
              </dd>
            </dl>
          </li>
        </ul>
        <!-- 回复框 -->
        <van-popup
          v-model="show"
          position="bottom"
          :style="{
            height: '20%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }"
          ><textarea
            cols="30"
            rows="10"
            v-model="repmsg"
            @keydown.enter="replyTo"
          ></textarea
        ></van-popup>
      </div>
    </div>

    <div class="commentinp">
      <input
        type="text"
        v-model="issuemsg"
        placeholder="评论文章..."
        @keydown.enter="issue"
      />
    </div>
  </div>
</template>

<script>
import { postComment, getComment, postReply } from "../api/comment";
import { getArticleDetail } from "../api/details";
import Vue from "vue";
import { Popup, Toast, Button,Dialog } from "vant";
Vue.use(Button);
Vue.use(Toast);
Vue.use(Popup);
Vue.use(Dialog) 
export default {
  data() {
    return {
      list: [],
      show: false,
      issuemsg: "",
      repmsg: "",
      commenList: [],
      commenid: "",
      quoteid: "",
    };
  },
  mounted() {
    getArticleDetail(this.$route.params.id)
      .then((res) => {
        this.list = res.data;
      })
      .then(() => {
        return getComment(this.list.id);
      })
      .then((res2) => {
        this.commenList = res2.data;
      });
  },
  methods: {
    issue() {
      if (this.$store.state.user.userid) {
        postComment({
          userid: this.$store.state.user.userid,
          articleid: this.list.id,
          username: this.$store.state.user.username,
          userimg: this.$store.state.user.userimg,
          content: this.issuemsg,
        }).then(() => {
          Toast.success("评论成功");
          getComment(this.list.id).then((res) => {
            this.commenList = res.data;
          });
        });
      } else {
        Dialog.confirm({
          title: "提示",
          message: "请先登录再评论",
        })
          .then(() => {
            this.$router.push('/login')
          })
          .catch(() => {
          });
      }
    },
    reply(id, quoteid) {
      this.show = true;
      this.commenid = id;
      this.quoteid = quoteid;
    },
    replyTo() {
      postReply({
        commentid: this.commenid,
        userid: this.$store.state.user.userid,
        quoteid: this.quoteid,
        articleid: this.list.id,
        username: this.$store.state.user.username,
        userimg: this.$store.state.user.userimg,
        content: this.repmsg,
      }).then(() => {
        Toast.success("回复成功");
        this.repmsg = "";
        getComment(this.list.id).then((res) => {
          this.commenList = res.data;
        });
      });
    },
  },
};
</script>

<style scoped>
dd {
  margin-left: 1rem;
}
textarea {
  width: 90%;
  margin: 0 auto;
  height: 80%;
  border: 1px solid #cccccc;
}
.commentcon {
  padding: 0.3rem;
}
.userinfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.24rem;
}
.userinfo p {
  flex: 1;
  color: #66d397;
  font-weight: bold;
  font-size: 0.32rem;
  margin-left: 0.3rem;
}
.comment img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}
.commentinp {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.7rem;
  background-color: #ffffff;
  border-top: 0.01rem solid rgba(170, 170, 170, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.commentinp input {
  font-size: 0.24rem;
  width: 90%;
  height: 80%;
  background-color: #f1eded;
  border-radius: 0.2rem;
  text-indent: 0.2rem;
}
.detbox {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1;
  overflow: auto;
}
header {
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.22rem;
  box-sizing: border-box;
  background-color: #ffffff;
}
header i {
  font-size: 0.48rem;
}
header div {
  font-size: 0.32rem;
  font-weight: bold;
}
h2 {
  font-size: 0.42rem;
  font-weight: bold;
  line-height: 0.87rem;
  text-align: center;
  width: 6rem;
  margin: 0 auto;
}
.texbox {
  font-size: 0.3rem;
  padding: 0 0.3rem;
}
.comment {
  font-size: 0.24rem;
  margin-bottom: 0.8rem;
}
.mainrep {
  padding: 0.3rem;
}
dt,
dd {
  padding: 0.2rem 0;
  border-bottom: 0.01rem solid rgba(170, 170, 170, 0.5);
}
</style>
